<template>
  <div>
     <div class="weekend-title">周末去哪儿</div>
     <ul>
         <li class="item" v-for="(item,index) in weekendList" :key="index">    
              <div class="item-img-wrapper">  
                 <img class="item-img" :src="item.imgUrl">    
              </div>
             <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{ item.desc}}</p>
        
             </div>
         </li>
     </ul>
  </div>
</template>

<script>
export default {
 name:'HomeWeekend',
 data (){
     return{
     weekendList:[{
         id:"0001",
         imgUrl:'http://img1.qunarzz.com/sight/source/1811/15/66f14e0fd6fbb.jpg_r_640x214_5d69f21d.jpg',
         title:'清远周边逛',
         desc:'人人都有一双发现美的眼睛，身边的事物最熟悉不',

     },{
         id:"0002",
         imgUrl:'http://img1.qunarzz.com/sight/source/1811/b8/5d599bbdcf8b57.jpg_r_640x214_2ee055e3.jpg',
         title:'泛在海上的绿洲',
         desc:'南国滨海之城，避寒圣地，有暖暖的阳光，海风习',
   
     },{
         id:"0003",
         imgUrl:'http://img1.qunarzz.com/sight/source/1505/92/580e9ea4f37a1b.jpg_r_640x214_72112761.jpg',
         title:'广州必打卡',
         desc:'感受现代与传统相融合的广州',
      
     },{
         id:"0004",
         imgUrl:'http://img1.qunarzz.com/sight/source/1811/f8/29dfa785277839.jpg_r_640x214_7d051523.jpg',
         title:'阳江温泉知多少',
         desc:'这里的天空和大海让人心旷神怡，配上舒缓的优美',
 
     },{
         id:"0005",
         imgUrl:'http://img1.qunarzz.com/sight/source/1812/47/cbdc44f461db0d.jpg_r_640x214_aab1da76.jpg',
         title:'珠江夜游',
         desc:'绚烂的霓虹灯将珠江照亮，跳上一艘游船，沉浸在这',
   
     }]
   }
  }
}
</script>

<style scoped>
 .weekend-title{
     margin-top:5px;
     line-height:20px;
     background:#eee;
     text-indent:10px;
 }
 .item-img-wrapper{
  overflow:hidden;
  height:0;
  padding-bottom:34%;

 }

 .item-img{
     width:100%;

 }

 .item-info{
     flex:1
 }
 .item-title{
     line-height:30px;
     margin-top:5px;
     margin-left:10px;
 }
 .item-desc{
     color:#ccc;
    margin-left:10px;
    margin-top:-15px;
    font-size:10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
 }
 .item{
    margin-left:-40px;
 }
ul{
    list-style-type:none;
   
}
</style>
